<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考勤管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <h2><i class="fas fa-fingerprint"></i> 考勤管理</h2>
            </div>
            <ul class="sidebar-menu">
                <li class="menu-item active" data-page="dashboard">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>仪表盘</span>
                </li>
                <li class="menu-item" data-page="fingerprint">
                    <i class="fas fa-fingerprint"></i>
                    <span>指纹采集</span>
                </li>
                <li class="menu-item" data-page="devices">
                    <i class="fas fa-desktop"></i>
                    <span>设备管理</span>
                </li>
                <li class="menu-item" data-page="attendance">
                    <i class="fas fa-clock"></i>
                    <span>考勤记录</span>
                </li>
                <li class="menu-item" data-page="employees">
                    <i class="fas fa-users"></i>
                    <span>员工管理</span>
                </li>
                <li class="menu-item" data-page="sync">
                    <i class="fas fa-sync"></i>
                    <span>数据同步</span>
                </li>
                <li class="menu-item" data-page="settings">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </li>
            </ul>
        </nav>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部导航 -->
            <header class="top-header">
                <div class="header-left">
                    <button class="menu-toggle">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h1 class="page-title">仪表盘</h1>
                </div>
                <div class="header-right">
                    <div class="sync-status">
                        <i class="fas fa-circle sync-indicator"></i>
                        <span>同步正常</span>
                    </div>
                    <div class="user-info">
                        <i class="fas fa-user-circle"></i>
                        <span>管理员</span>
                    </div>
                </div>
            </header>

            <!-- 页面内容 -->
            <div class="page-content">
                <!-- 仪表盘页面 -->
                <div id="dashboard-page" class="page active">
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="stat-info">
                                <h3 id="total-employees">0</h3>
                                <p>总员工数</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-desktop"></i>
                            </div>
                            <div class="stat-info">
                                <h3 id="online-devices">0</h3>
                                <p>在线设备</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="stat-info">
                                <h3 id="today-records">0</h3>
                                <p>今日打卡</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-fingerprint"></i>
                            </div>
                            <div class="stat-info">
                                <h3 id="total-fingerprints">0</h3>
                                <p>指纹总数</p>
                            </div>
                        </div>
                    </div>

                    <div class="dashboard-charts">
                        <div class="chart-container">
                            <h3>考勤趋势</h3>
                            <canvas id="attendance-chart"></canvas>
                        </div>
                        <div class="recent-activity">
                            <h3>最近活动</h3>
                            <div id="recent-activities" class="activity-list">
                                <!-- 动态加载 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 指纹采集页面 -->
                <div id="fingerprint-page" class="page">
                    <div class="page-header">
                        <h2>指纹采集</h2>
                        <button class="btn btn-primary" id="init-collector-btn">
                            <i class="fas fa-power-off"></i>
                            初始化采集器
                        </button>
                    </div>

                    <div class="fingerprint-section">
                        <div class="employee-selector">
                            <h3>选择员工</h3>
                            <div class="search-box">
                                <input type="text" id="employee-search" placeholder="搜索员工姓名或工号">
                                <i class="fas fa-search"></i>
                            </div>
                            <div id="employee-list" class="employee-list">
                                <!-- 动态加载员工列表 -->
                            </div>
                        </div>

                        <div class="fingerprint-collector">
                            <h3>指纹采集</h3>
                            <div class="collector-status">
                                <div class="status-indicator" id="collector-status">
                                    <i class="fas fa-circle"></i>
                                    <span>设备未连接</span>
                                </div>
                            </div>
                            
                            <div class="fingerprint-preview">
                                <div class="finger-selection">
                                    <h4>选择手指</h4>
                                    <div class="finger-grid">
                                        <button class="finger-btn" data-finger="1">左拇指</button>
                                        <button class="finger-btn" data-finger="2">左食指</button>
                                        <button class="finger-btn" data-finger="3">左中指</button>
                                        <button class="finger-btn" data-finger="4">左无名指</button>
                                        <button class="finger-btn" data-finger="5">左小指</button>
                                        <button class="finger-btn" data-finger="6">右拇指</button>
                                        <button class="finger-btn" data-finger="7">右食指</button>
                                        <button class="finger-btn" data-finger="8">右中指</button>
                                        <button class="finger-btn" data-finger="9">右无名指</button>
                                        <button class="finger-btn" data-finger="10">右小指</button>
                                    </div>
                                </div>
                                
                                <div class="fingerprint-display">
                                    <div class="fingerprint-image" id="fingerprint-image">
                                        <i class="fas fa-fingerprint"></i>
                                        <p>请将手指放在采集器上</p>
                                    </div>
                                    <div class="quality-meter">
                                        <label>指纹质量</label>
                                        <div class="quality-bar">
                                            <div class="quality-fill" id="quality-fill"></div>
                                        </div>
                                        <span id="quality-text">0%</span>
                                    </div>
                                </div>
                            </div>

                            <div class="collector-actions">
                                <button class="btn btn-success" id="collect-btn" disabled>
                                    <i class="fas fa-fingerprint"></i>
                                    开始采集
                                </button>
                                <button class="btn btn-secondary" id="retry-btn" disabled>
                                    <i class="fas fa-redo"></i>
                                    重新采集
                                </button>
                                <button class="btn btn-primary" id="save-fingerprint-btn" disabled>
                                    <i class="fas fa-save"></i>
                                    保存指纹
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="fingerprint-list">
                        <h3>已采集指纹</h3>
                        <div id="collected-fingerprints" class="fingerprint-grid">
                            <!-- 动态加载已采集的指纹 -->
                        </div>
                    </div>
                </div>

                <!-- 设备管理页面 -->
                <div id="devices-page" class="page">
                    <div class="page-header">
                        <h2>设备管理</h2>
                        <button class="btn btn-primary" id="add-device-btn">
                            <i class="fas fa-plus"></i>
                            添加设备
                        </button>
                    </div>

                    <div class="devices-grid" id="devices-grid">
                        <!-- 动态加载设备列表 -->
                    </div>
                </div>

                <!-- 考勤记录页面 -->
                <div id="attendance-page" class="page">
                    <div class="page-header">
                        <h2>考勤记录</h2>
                        <div class="header-actions">
                            <button class="btn btn-secondary" id="sync-attendance-btn">
                                <i class="fas fa-sync"></i>
                                同步数据
                            </button>
                            <button class="btn btn-primary" id="export-attendance-btn">
                                <i class="fas fa-download"></i>
                                导出记录
                            </button>
                        </div>
                    </div>

                    <div class="attendance-filters">
                        <div class="filter-group">
                            <label>日期范围</label>
                            <input type="date" id="start-date">
                            <span>至</span>
                            <input type="date" id="end-date">
                        </div>
                        <div class="filter-group">
                            <label>员工</label>
                            <select id="employee-filter">
                                <option value="">全部员工</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <label>设备</label>
                            <select id="device-filter">
                                <option value="">全部设备</option>
                            </select>
                        </div>
                        <button class="btn btn-primary" id="search-attendance-btn">
                            <i class="fas fa-search"></i>
                            查询
                        </button>
                    </div>

                    <div class="attendance-table-container">
                        <table class="attendance-table" id="attendance-table">
                            <thead>
                                <tr>
                                    <th>员工姓名</th>
                                    <th>工号</th>
                                    <th>打卡时间</th>
                                    <th>打卡类型</th>
                                    <th>验证方式</th>
                                    <th>设备</th>
                                    <th>同步状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="attendance-tbody">
                                <!-- 动态加载考勤记录 -->
                            </tbody>
                        </table>
                    </div>

                    <div class="pagination" id="attendance-pagination">
                        <!-- 动态生成分页 -->
                    </div>
                </div>

                <!-- 其他页面占位符 -->
                <div id="employees-page" class="page">
                    <h2>员工管理</h2>
                    <p>员工管理功能开发中...</p>
                </div>

                <div id="sync-page" class="page">
                    <h2>数据同步</h2>
                    <p>数据同步功能开发中...</p>
                </div>

                <div id="settings-page" class="page">
                    <h2>系统设置</h2>
                    <p>系统设置功能开发中...</p>
                </div>
            </div>
        </main>
    </div>

    <!-- 模态框 -->
    <div id="modal-overlay" class="modal-overlay">
        <div class="modal">
            <div class="modal-header">
                <h3 id="modal-title">标题</h3>
                <button class="modal-close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body" id="modal-body">
                <!-- 动态内容 -->
            </div>
            <div class="modal-footer" id="modal-footer">
                <!-- 动态按钮 -->
            </div>
        </div>
    </div>

    <!-- 加载指示器 -->
    <div id="loading-overlay" class="loading-overlay">
        <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <p>加载中...</p>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/fingerprint.js"></script>
    <script src="js/devices.js"></script>
    <script src="js/attendance.js"></script>
</body>
</html>

